<template>
  <div>
    <!-- 新开就诊 -->
    <el-row>
      <el-col style="font-size:18px" :span="3" :offset="16">
        总费用：800元
      </el-col>
      <el-col :span="5">
        <el-button type="primary" @click="dialogTableVisible = true">结算</el-button>
        <el-button type="success" @click="drawer = true">挂号</el-button>
        <el-button type="warning">清空</el-button>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="15" style="margin-left:20px">
        <el-descriptions direction="descriptions" title="患者信息">
          <el-descriptions-item label="姓名" />
          <el-descriptions-item label="手机号" />
          <el-descriptions-item label="居住地" />
          <el-descriptions-item label="备注">
            <el-tag size="small">公司</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="联系地址" />
        </el-descriptions>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="8">
        <template>
          <el-tabs v-model="activeName" type="border-card">
            <el-tab-pane style="height:390px" label="未就诊" name="nodoctor">
              <el-table
                :data="noseedoctor"
                style="width: 100%"
              >
                <el-table-column
                  label="患者信息"
                  width="360"
                >
                  <template slot-scope="scope">
                    {{ scope.row.name+"/"+scope.row.sex+"/"+scope.row.age }}
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane style="height:390px" label="已就诊" name="yesdoctor">111 </el-tab-pane>
          </el-tabs>
        </template>
      </el-col>

      <el-col :span="15" style="margin-left:10px">
        <template>
          <el-tabs v-model="binli" type="border-card">
            <el-tab-pane style="height:390px" label="病例" name="binli">
              <table>
                <tr>
                  <td>
                    <span>主诉:</span>
                    <el-input style="width:200px" />
                  </td>
                  <td>
                    <span>发病日期:</span>
                    <el-date-picker
                      v-model="value1"
                      type="date"
                      placeholder="选择日期"
                    />
                  </td>
                  <td>
                    <span>就诊类型:</span>
                    <el-select v-model="value" placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </td>
                </tr>
                <tr>
                  <td colspan="2">
                    <span>病情概括:</span>
                    <el-input type="textarea" placeholder="" />
                  </td>
                </tr>
                <tr>
                  <td colspan="2">
                    <span>就诊结果:</span>
                    <el-input type="textarea" placeholder="" />
                  </td>
                </tr>
                <tr>
                  <td colspan="2">
                    <span>医生建议:</span>
                    <el-input type="textarea" placeholder="" />
                  </td>
                </tr>
                <tr>
                  <td colspan="2">
                    <span>备注:</span>
                    <el-input type="textarea" placeholder="" />
                  </td>
                </tr>
              </table>
            </el-tab-pane>
            <el-tab-pane style="height:390px" label="处方" name="chufang">
              <el-button type="primary" icon="el-icon-plus">处方</el-button>

            </el-tab-pane>
          </el-tabs>
        </template>
      </el-col>
    </el-row>

    <!-- 测边框 -->
    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      :with-header="false"
    >
      <span>
        测边框
      </span>
    </el-drawer>
    <!-- 收费 -->
    <el-dialog title="结算" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column property="date" label="日期" width="150" />
        <el-table-column property="name" label="姓名" width="200" />
        <el-table-column property="address" label="地址" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Seedoctor',
  data() {
    return {
      // 收费
      gridData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      dialogTableVisible: false,
      // 测边框
      drawer: false,
      // 未就诊列表
      noseedoctor: [
        {
          id: 1,
          name: '冯心愿',
          age: '18',
          sex: '男',
          date: '2008-02-02'
        },
        {
          id: 1,
          name: '冯心愿',
          age: '18',
          sex: '男',
          date: '2008-02-02'
        },
        {
          id: 1,
          name: '冯心愿',
          age: '18',
          sex: '男',
          date: '2008-02-02'
        }
      ],
      // 已就诊列表
      yesseedoctor: '',
      value1: '',
      binli: 'binli',
      activeName: 'nodoctor',
      options: [{
        value: '选项1',
        label: '黄金糕'
      }],
      value: ''
    }
  },
  methods: {

  }
}
</script>

<style>
.el-tab-pane{
    height: 100%;

}

</style>
